import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faEdit, faTrash, faTimes } from '@fortawesome/free-solid-svg-icons'
import { faMarkdown } from '@fortawesome/free-brands-svg-icons'
import useKeyPress from '../hooks/useKeyPress'
const FileList = ({ files, onFileClick, onSaveEdit, onFileDelete }) => {
  const [editStatus, setEditStatus] = useState(null)
  const [value, setValue] = useState('')
  const enterPressed = useKeyPress(13)
  const escPressed = useKeyPress(27)
  const closeSearch = (file) => {
    setEditStatus(false)
    setValue('')
    if (file.isNew) {
      onFileDelete(file.id, true)
    }
  }
  useEffect(() => {
    const file = files.find(r => r.id === editStatus)
    if (enterPressed && editStatus && value.trim() !== '') {
      onSaveEdit(file.id, value, file.isNew)
      setEditStatus(false)
      setValue('')
    } else if (escPressed && editStatus) {
      closeSearch(file)
    }
  })
  useEffect(() => {
    const newFiles = files.find(r => r.isNew)
    if (newFiles) {
      setEditStatus(newFiles.id)
      setValue(newFiles.title)
    }
  }, [files])
  return (
    <ul className="list-group list-group-flush list-wrap">
      {files.map(r => (
        <li key={r.id} className="list-group-item bg-light d-flex align-items-center justify-content-between file-item">
          {
            (editStatus !== r.id && !r.isNew) &&
            <>
              <div className="file-item-left d-flex">
                <span className="markdown-icon">
                  <FontAwesomeIcon size="lg" icon={faMarkdown} />
                </span>
                <span
                  className="c-link"
                  onClick={() => { onFileClick(r.id) }}
                >{r.title}</span>
              </div>
              <div className="file-item-right">
                <button
                  type="button"
                  className="icon-button"
                  onClick={() => { setEditStatus(r.id); setValue(r.title) }}
                >
                  <FontAwesomeIcon size="lg" title="编辑" icon={faEdit} />
                </button>
                <button
                  type="button"
                  className="icon-button"
                  onClick={() => { onFileDelete(r.id) }}
                >
                  <FontAwesomeIcon size="lg" title="删除" icon={faTrash} />
                </button>
              </div>
            </>
          }
          {
            (editStatus === r.id || r.isNew) &&
            <>
              <input
                value={value}
                className="form-control"
                placeholder="请输入文件名称"
                onChange={(e) => { setValue(e.target.value) }}
              />
              <button
                type="button"
                className="icon-button"
                onClick={() => { closeSearch(r) }}
              >
                <FontAwesomeIcon size="lg" title="关闭" icon={faTimes} />
              </button>
            </>
          }
        </li>
      ))
      }
    </ul>
  )
}
FileList.propTypes = {
  files: PropTypes.array,
  onFileClick: PropTypes.func,
  onSaveEdit: PropTypes.func,
  onFileDelete: PropTypes.func
}

export default FileList